Typography
These components apply default styling to elements. This is useful in cases where applying a class to an element removes its default styling.
Headings
Use these heading classes on any element to add heading styles. This lets you apply heading styles for alternate heading levels as well. For example, .cmp-heading-1 can go on an <h1>, but it can also go on an <h2>, or any other element that should look like the styles defined in the .cmp-heading-1 class.
View
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML
<h1 class="cmp-heading-1">Heading 1</h1>
<h2 class="cmp-heading-2">Heading 2</h2>
<h3 class="cmp-heading-3">Heading 3</h3>
<h4 class="cmp-heading-4">Heading 4</h4>
<h5 class="cmp-heading-5">Heading 5</h5>
<h6 class="cmp-heading-6">Heading 6</h6>Link
Use this to give any element link styling.
Paragraph
Use this to create default-looking paragraphs.
View
It is the process of displacement which is chiefly responsible for our being unable to discover or recognize the dream-thoughts in the dream-content, unless we understand the reason for their distortion.
HTML
<p class="cmp-paragraph">
It is the process of displacement which is chiefly responsible for our being
unable to discover or recognize the dream-thoughts in the dream-content,
unless we understand the reason for their distortion.
</p>Callout
Use this to create large (5em) blocks of callout text for any text element (see paragraph and span examples below).
View
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
HTML
<p class="cmp-paragraph cmp-callout">
Lorem ipsum dolor sit.
</p>
<p>
<span class="cmp-callout">Lorem</span> ipsum dolor sit.
</p>